import React, { Component } from 'react';
import { connect } from 'dva';
import Link from 'umi/link'
import { Layout, Icon, Divider } from 'antd';
import TopNavHeader from '@/components/TopNavHeader';
import Download from '@/components/Download';

import styled from 'styled-components'
import styles from './styles.less'

const { Header } = Layout;

export interface Props {
  dispatch?: Function;
  collapsed?: Boolean;
  location?: any;
  owner?: { companyName: string }
}

const MyLink = styled(Link)`
  margin-left: 30px;
  font-size: 20px; 
  color: rgba(0, 0, 0, 0.95);
  &:hover {
    color: #0880DF;
  }
`
const JumpLink = styled(Link)`
  position: absolute; 
  right: 300px; 
  border-right: 1px solid rgb(222, 225, 231);
  padding-right: 20px;
  font-size: 18px; 
  color: rgba(0, 0, 0, 0.95);
  &:hover {
    color: #0880DF;
  }
`

@connect(({ global, user = {} }) => ({
  collapsed: global.collapsed || false,
  owner: user.details || {}
}))
class Head extends Component<Props, any> {

  logout = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/logout',
    });
  };

  handleCollapse = () => {
    const { dispatch, collapsed } = this.props;
    dispatch({ type: 'global/setCollapsed', payload: !collapsed })
  }

  render() {

    const { owner } = this.props;
    console.log('单位信息')
    console.log(owner)

    return (
      <Header style={{ background: '#fff', borderBottom: '1px solid #DEE1E7' }}>
        <span
          className={styles.collapsed}
          onClick={this.handleCollapse}
        >
          {this.props.collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
        </span>
        <Divider type="vertical" style={{ top: '-6px', left: '20px', height: '100%' }} />
        <MyLink to="/home">
          <Icon type="home" /> {owner.companyName || ''}
        </MyLink>
        {owner.companyId == '541335765222043648' ? <JumpLink>
          <Icon type="home" />
          <span
            style={{ 'padding-left': '5px' }}
            onClick={() => { window.open('https://sample2.lanchengiot.cn/sc') }}>
            驾驶舱
          </span>
        </JumpLink> : ''
        }
        <Download />
        <TopNavHeader logout={this.logout} />
      </Header>
    )
  }
}

export default Head;
